
/* 全选 */
//  获取全选复选框，所有的商品都有一个独立的复选框
const checkAll = document.querySelector('#check-all');
const checkItems = document.getElementsByName('item');
checkALl.onchange = ev => {
// 如果全选框处于选中状态，ev.target.checked的值就为true，反之，为false。
    console.log(ev.target.checked);
    checkItems.forEach(item => item.checked = ev.target.checked);
    autoCalculate();
};

/* 单选 */
checkItems.forEach(item => item.onchange = ev => {
    checkAll.checked = Array.from(checkItems).every(checkItem => checkItem.checked);
    autoCalculate();
});



function autoCalculate() {
    // 获取单价组成的数组
    const priceLists = document.querySelectorAll('.price');
    console.log(priceLists);
    const priceArr = Array.from(priceLists).map(item => parseInt(item.textContent));
    // 获取数量组成的数组
    const numberLists = document.querySelectorAll('body input[type=number]');
    console.log(numberLists);
    const numbersArr = Array.from(numberLists).map(item => parseInt(item.value));
    console.log(priceArr, numbersArr);
    // 由于拿到的表单里的数据都是string类型的，所以需要先将其转换成int类型，因此需要使用`map()`方法操作一下
    let amountArr = [priceArr, numbersArr].reduce((prev, curr) => prev.map((item, index) => item * curr[index]));
    console.log(amountArr);
    const amountDOM = document.querySelectorAll('.amount');
    amountDOM.forEach((item, index) => item.textContent = amountArr[index]);
 
    // 首先声明一个数组，用于存储被选中的商品的状态，如果被选中，值为1，未被选中，则为0
    let isChecked = [];
    checkItems.forEach(item => isChecked.push(item.checked === true ? 1 : 0));
    console.log(isChecked);
    // 声明一个用于存储商品数量的数组，该数组的作用是：如果商品处于被选中的状态，那么就存储它真实的数量值，
    // 如果没有被选中，那么数量就是0
    let checkedNumbers = [];
    numbersArr.forEach((item, index) => checkedNumbers.push(item * isChecked[index]));
    console.log(checkedNumbers);
    // 此时，被选中的商品的总数为：
    let checkedSum = checkedNumbers.reduce((prev, curr) => prev + curr);
    console.log(checkedSum);
    // 将获取的数量结果渲染到页面中
    document.querySelector('#sum').textContent = checkedSum;
    // 下面开始计算被选中的商品的总金额，该总金额等于上面所有被选中的商品的总金额之和。
    // 声明一个数组用于存储每一个被选中的商品的总金额
    let checkedPrice = [];
    checkedNumbers.forEach((item, index) => checkedPrice.push(item * priceArr[index]));
    console.log(checkedPrice);
    // 计算被选中的商品总金额
    let totalAmount = checkedPrice.reduce((prev, curr) => prev + curr);
    // 将选中的商品总金额渲染到页面中
    document.querySelector('#total-amount').textContent = totalAmount;
}

// 页面第一次加载的时候自动执行一次。
window.onload = autoCalculate;

// 监听某个控件的事件，首先需要拿到控件元素。
const numInput = document.querySelectorAll('body input[type=number]');
// 上面都用了onchange来监听，这里换个方法使用addEventListener。
numInput.forEach(item => item.addEventListener('change', autoCalculate));


















